<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
    <header>
        <div></div>
        <div><img src="img/logo.png" alt=""></div>
        <div></div>
        <form>
            <input type="search" value="搜索">
        </form>
    </header>
<section>
<!--banner轮播-->
        <div class="swiper-container banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/banner.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/banner.png" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
<!--列表-->
    <nav>
        <ul>
            <li>
                <img src="img/btn1.png" alt="">
                <p>分类列表</p>
            </li>
            <li>
                <img src="img/btn2.png" alt="">
                <p>分类列表</p>
            </li>
            <li>
                <img src="img/btn3.png" alt="">
                <p>分类列表</p>
            </li>
            <li>
                <img src="img/btn4.png" alt="">
                <p>分类列表</p>
            </li>

            <li>
                <img src="img/btn5.png" alt="">
                <p>分类列表</p>
            </li>
            <li>
                <img src="img/btn6.png" alt="">
                <p>分类列表</p>
            </li>
            <li>
                <img src="img/btn7.png" alt="">
                <p>分类列表</p>
            </li>
            <li>
                <img src="img/btn8.png" alt="">
                <p>分类列表</p>
            </li>

        </ul>
    </nav>
    <!--特卖-->
    <div class="tm">
        <div class="title">
            淘宝特卖  <span>每日十点更新</span>
        </div>
        <div class="list">
            <ul>
                <li>
                    <p>9块9特卖</p>
                    <span>超值购物</span>
                </li>
                <li>
                    <p>舒适卫浴</p>
                    <span>安全专利</span>
                </li>
                <li>
                    <p>团购</p>
                    <span>SkG养生壶</span>
                </li>
                <li>
                    <p>潮流3c</p>
                    <span>优惠立减</span>
                </li>
            </ul>
        </div>
       <div class="list-img">
           <ul>
               <li>
                   <img src="img/img5.png" alt="">
               </li>
               <li>
                   <img src="img/img6.png" alt="">
               </li>
               <li>
                   <img src="img/img7.png" alt="">
               </li>
               <li>
                   <img src="img/img8.png" alt="">
               </li>
           </ul>
       </div>
        <div class="list-text">
            <div class="titl">
                限时特价
            </div>
            <ol>
                <li>
                   <p>连衣裙</p>
                    <p>针织开衫</p>
                    <p>马上抢货</p>
                </li>
                <li>
                    <p>连衣裙</p>
                    <p>针织开衫</p>
                    <p>马上抢货</p>
                </li>
                <li>
                    <p>连衣裙</p>
                    <p>针织开衫</p>
                    <p>马上抢货</p>
                </li>
                <li>
                    <p>连衣裙</p>
                    <p>针织开衫</p>
                    <p>马上抢货</p>
                </li>
            </ol>
            <div class="titl">
                低价爆款
            </div>
            <ul>
                <li>
                    <img src="img/img9.png" alt="">
                </li>
                <li>
                    <img src="img/img10.png" alt="">
                </li>
                <li>
                     <img src="img/img11.png" alt="">
                 </li>
                <li>
                    <img src="img/img12.png" alt="">
                </li>
                <li>
                    <img src="img/img13.png" alt="">
                </li>
                <li>
                    <img src="img/img14.png" alt="">
                </li>
            </ul>
        </div>
    </div>
</section>
<!--脚部-->
<footer>
    <a href="#">
        <img src="img/ft.png" alt="">
    </a>
    <a href="#">
        <img src="img/ft4.png" alt="">
    </a>
    <a href="#">
        <img src="img/ft2.png" alt="">
    </a>
    <a href="#">
         <img src="img/ft3.png" alt="">
    </a>
    <a href="#">
        <img src="img/ft1.png" alt="">
    </a>

</footer>
</body>
<script>
    new Swiper(".banner",{
        autoplay:2000,
        pagination:".swiper-pagination",
        paginationClickable:true,
        autoplayDisableOnInteraction:false,
        loop:true,

    })
</script>
</html>